今天要講的內容一樣延續之前的主題 - 怎麼在 composition API 中繼續使用我們熟悉的老朋友 XD

ref & $refs

由於到了 composition API 之後，我們不能再繼續用 this 來取用 $refs 了QQ
因此今天就來看看怎麼在 composition API 中正確取用 $refs 啦~

<button type="button" ref="btn">按鈕</button>
<card ref="card"></card>

// 元件
const {creatApp,ref,onMounted} = Vue

const card = {
    template:`<div class="card">
        <div class="card-body">
            <h5 class="card-title"></h5>
        </div>
    </div>`,
    setup(props){
        function getConsole(){
            console.log(context)
        }
        return{
           getConsole
        }
    }
}

首先，我們需要在 setup 內定義變數。此處的變數名稱需與 html 的 ref 的名稱相同，並傳入 null，接著到 onMounted 去取用就取到 DOM 啦~

// 父層
const app = creatApp({
    components:{ card },
setup(){
    const person = ref({
        name:"小花"
    })
    
    //此處須與 ref 名稱相同
    const btn = ref(null);
    const card = ref(null);
    
    onMounted(()=>{
        console.log(btn.value) // <button type="button" ref="btn">按鈕</button>
        console.log(card.value) //<div class="card"><div class="card-body"><h5 class="card-title"></h5></div></div>
    })
    return{
        person,
        btn,
        card
    }
}
})

Provider & Inject

先承認 Provider & Inject 我實務上超少碰到，基本已經忘光光了 XD 因為通常資料只跨一層的話就直接用 emit & props，跨很多層的話就直接用狀態管理工具，如 vuex or pinia 來做管理了。

雖然但是，也不是說所有東西都得塞狀態管理工具，傳遞的資料最好是給很多頁面覆用的，才適合放在狀態管理工具裡。因此你如果確認資料的流向非常單純，就是那個頁面要用到!! 但又隔好幾層的狀況下，你可能就會需要 Provider & Inject 了。

好的，那就先講簡單講一下 Provider & Inject 分別是什麼作用好了。

Provider : 可進行跨元件層級地資料傳遞，將資料從外層傳入相隔兩、三層的內層。
Inject : 把外層的資料接收進來。

還是直接來看看程式碼比較快。

provide 會帶兩個參數，第一個是我們自定義的名稱、第二個是要傳輸的資料內容。

// 父層
const app = creatApp({
    components:{ card },
setup(){
    // 注意這裡不是用 ref 來定義
    const person = {
        name:"小花"
    }
    
    provide('person',person)
    
    return{
       person
    }
}
})

雖然能透過 inject 正確接收來自外層的資料，但這樣的資料是不具 雙向綁定的特性的，因為我們在外層定義資料的時候是用 物件。 如果要讓傳進的資料具有雙向綁定的特性，在定義變數時就要先透過 ref & reactive 來定義。

// 元件
const {creatApp,ref,provide,inject} = Vue

const card = {
    template:`<div class="card">
        <div class="card-body">
            <h5 class="card-title">{{person.name}}</h5> //小花
            <input type="text" v-model="person.name"> // 就算在這裡綁 v-model 也不會雙向綁定
        </div>
    </div>`,
    setup(props){
        // 在這裡使用 inject 做接收
        const person = inject("person")
        
        return{
            person
        }
    }
}